<template>
    <div>
        <ul v-if="subjects.length>0 || advertisements.length>0" class="list">
            <template v-if="kind==='utime'||kind==='view' || kind==='history'">
                <li v-for="(subject, idx) in subjects" :key="idx" class="diy-item">
                    <router-link :to="{path:'/testing', query: {id: subject.id}}">
                        <figure class="cover">
                            <img class="" :src="$axios.defaults.proxyImage(subject.img)">
    <!--                        <img class="original-span" src="./测试_files/original.png">-->
                        </figure>
                        <div class="diy-meta">
                            <div class="title mui-ellipsis">{{subject.title}}</div>
                            <span class="iconfont" style="color: #ffa016;font-size: 14px">
                                <i class="iconfont icon-Icon_Start"></i>
                                <i class="iconfont icon-Icon_Start"></i>
                                <i class="iconfont icon-Icon_Start"></i>
                                <i class="iconfont icon-Icon_Start"></i>
                                <i class="iconfont icon-Icon_Start"></i>
                            </span>
                            <span class="count">{{subject.view.toFixed(2)}} 万人在测</span>
                            <div class="desc mui-ellipsis">{{subject.desc}}</div>
                        </div>
                    </router-link>
                    <router-link :to="{path:'/testing', query: {id: subject.id}}" class="play">
                        去测 &gt;
                    </router-link>
                </li>
            </template>
            <template v-else>
                <li v-for="(advertisement, idx) in advertisements" :key="idx" class="diy-item">
                    <a target="_blank" :href="advertisement.Url">
                        <figure class="cover">
                            <img class="" :src="advertisement.ImgUrl">
                            <!--                        <img class="original-span" src="./测试_files/original.png">-->
                        </figure>
                        <div class="diy-meta">
                            <div class="title mui-ellipsis">{{advertisement.Title}}</div>
                            <span class="iconfont" style="color: #ffa016;font-size: 14px">
                                <i class="iconfont icon-Icon_Start"></i>
                                <i class="iconfont icon-Icon_Start"></i>
                                <i class="iconfont icon-Icon_Start"></i>
                                <i class="iconfont icon-Icon_Start"></i>
                                <i class="iconfont icon-Icon_Start"></i>
                            </span>
                            <span class="count">{{advertisement.View.toFixed(2)}} 万人在测</span>
                            <div class="desc mui-ellipsis">{{advertisement.Desc}}</div>
                        </div>
                    </a>
                    <a target="_blank" :href="advertisement.Url" class="play">
                        去测 &gt;
                    </a>
                </li>
            </template>
        </ul>
        <div v-else>
            <h2 style="font-size: 22px; text-align: center; margin: 40px 0;color: #686868" v-if="kind==='history'">暂无记录</h2>
            <h2 style="font-size: 22px; text-align: center; margin: 40px 0;color: #686868" v-else>加载中...</h2>
        </div>
        <div class="loading_model" v-show="loading">
            <img src="/img/Heart-1s-200px.svg" alt="" style="width: 80px;height: 80px">
        </div>
    </div>
</template>

<script>
export default {
    name:"list",
    props:["kind"],
    data() {
        return {
            subjects:[],
            subject:{
                "id": "7024",
                "desc": "十二星座的性格爱好迥然不同，但总存在着一些共通的特质让你与某个星座特别处得来，想知道你与哪个星座是完美组合，哪个星座最配得上独一无二的你呢？快来测测吧~",
                "img": "quce/1558086972c83JC.png",
                "original": "1",
                "type": "",
                "title": "哪个星座最配得上你？",
                "view": 13.5,
                "is_game": "0"
            },
            advertisements:[],
            advertisement:{
                "Kind": "",
                "Img": "",
                "ImgUrl": "",
                "Title": "",
                "Desc": "",
                "View": 0,
                "Url": ""
            },
            page: 1,
            end: false,
            loading: false,
        }
    },
    created() {
        this.getData();
        if(this.kind !== 'history') {
            window.addEventListener('scroll', this.handleScroll);
        }
    },
    destroyed () {
        if(this.kind !== 'history') {
            window.removeEventListener('scroll', this.handleScroll);
        }
    },
    methods: {
        getData(){
            if(!this.end) {
                if (this.kind === "utime" || this.kind === "view") {
                    this.getSubjects();
                } else if (this.kind==="history") {
                    this.subjects = this.gameHistory.getHistory();
                } else if (this.kind==="advertisement") {
                    this.getAdvertisements()
                }
            }
        },
        getSubjects() {
            this.loading = true;
            this.$axios.get("/subjects", {params: {order: this.kind, page: this.page}}).then((resp) => {
                let data = resp.data;
                if (data.subjects) {
                    this.subjects = this.subjects.concat(data.subjects);
                    this.page++;
                } else {
                    this.end = true;
                }
                this.loading = false;
            })
        },
        getAdvertisements() {
            this.loading = true;
            this.$axios.get("/advertisements", {params: {page: this.page, limit: 10}}).then((resp) => {
                let data = resp.data;
                if (data.advertisements) {
                    this.advertisements = this.advertisements.concat(data.advertisements);
                    this.page++;
                } else {
                    this.end = true;
                }
                this.loading = false;
            })
        },
        handleScroll () {
            let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            //变量windowHeight是可视区的高度
            let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //变量scrollHeight是滚动条的总高度
            let scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
            if(Math.ceil(scrollTop+windowHeight) === scrollHeight){
                this.getData();
            }
        }
    },
}
</script>

<style>
.loading_model{
    position: fixed;
    z-index: 9999;
    background: rgba(122,255,191,0);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
